<template>
  <div>
    <div @click="showPopup" class="button">
      <slot></slot>
      <van-icon name="arrow-down" color="#D9D9D9"/>
    </div>
    <!-- 调用vant库里的弹出层 -->
    <van-popup v-model="show" position="bottom">
      <div class="title">
        <span class="close" @click="onClose">×</span>
        <p class="sort">Sort</p>
      </div>
      <div class="select">
        <p v-for="(item,index) in sortList" :key="index" class="select-item" @click="setNewSort(item);getList()">
          {{item}}
        </p>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return{
      show:false,
      newSort:'Best Match',
      sortList:['Best Match', 'Newest', 'Price - Low To High','Price - High To Low']
    }
  },
  methods:{
    showPopup() {
      this.show = true;
    },
    onClose(){
      this.show = false;
    },
    setNewSort(value) {
      this.newSort = value
      this.show = false
    },
    //传给父组件
    getList(){
      this.$emit("getclickItem",this.newSort)
    }
  }
}
</script>
<style lang="less" scoped>
.title{
  display: flex;
  font-size: 1rem;
  position: relative;
  justify-content: center;
  height: 3.5rem;
  border-bottom: 0.1rem solid #000000;
  line-height: 3.5rem;
  .close{
    font-size: 2rem;
    position: absolute;
    left: 1rem;
  }
  .sort{
    font-weight: bold;
  }
}
.select{
  padding-bottom: 2.5rem;
  .select-item{
    height: 4rem;
    line-height: 4rem;
    border-bottom: 0.05px solid #D0D0D0;
    padding:0 1rem;
    font-weight: bold;
  }
}
.button{
  font-weight: bold;
  .van-icon{
    vertical-align: middle;
  }
}
</style>